<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>

<style type="text/css">
  *{
    margin:5px 10px;
  }
  .header{
    margin:5px 5px;
  }

  ul{
    border: 2px solid #eee;
    list-style: none;
  }
  ul li+li{
    border-top: 1px solid #eee;
  }
  .footer p{
    display: inline-block;
  }

  .footer a{
    display: inline-block;
    float: right;
    text-decoration: none;
  }
  
</style>
</head>
<body>

<br>
<div id="app" >

  <div class="header">
    <label for="">name:</label><input type="text">
    <button>添加</button>
  </div>

  <div class="box">
      <ul >
        <li v-for="(item,index) in list" > {{ index+1 }} --{{item.name}}</li>
      </ul>
  </div>

  <div class="footer" >
      <p>一共{{list.length}}条记录</p>
      <a href="#">清除记录</a>
  </div>
 

</div>


<br>
<script src="vue.js"></script>

<script type="text/javascript">






// 创建一个 app 的实例
var app = new Vue({
  el: '#app',

  data: {
    list:[

    ]

   },

  methods:{

  

  }

})





</script>

	
</body>
</html>